<script lang="ts">
// import { ref, onMounted, inject, defineComponent, SetupContext } from 'vue';
import { ref, onMounted, inject, defineComponent } from 'vue-demi';

import axios from 'axios';

interface Props {
  commet: string;
}

export default defineComponent({
  name: 'TZLogin',
  props: {
    commet: {
      type: String,
      default: ''
    }
  },
  setup(props: Props, { emit }) {
    const clientId = 'cli_a5c0568e26fbd013';
    const redirectTokenUrl = 'https://tz-auc.kaixinxiyou.com/v1/auth/applet';
    const redirectUrl =   'https://tz-auc.kaixinxiyou.com/v1/auth/code';
    // console.log(clientId,redirectTokenUrl,redirectUrl)
    // const redirectTokenUrl =  process.env.VUE_APP_BASE_URL + process.env.VUE_APP_GETTOKEN_API;
    // const redirectUrl = process.env.VUE_APP_BASE_URL + process.env.VUE_APP_REDIRECTURI_API;

    const projectId: string = props.commet;
    const xCode = ref<string>('');

    onMounted(() => {
      function getParameterByName(name: string, url?: string): string | null {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
              results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
      }

      xCode.value = getParameterByName('code') || '';
      if (xCode.value) {
        emit('custom-event', xCode.value);
      }
    });

    const feishuAutoLogin = async (code: string) => {
      const queryParams = {
        code: code,
        state: projectId
      };
      try {
        const response = await axios.get(redirectTokenUrl, {
          params: queryParams
        });
        emit('custom-event', response.data.data.code);
      } catch (error) {
        console.error(error);
      }
    }

    const feiShuAuthClick = () => {
      const feishuUrl = `https://open.feishu.cn/open-apis/authen/v1/user_auth_page_beta?app_id=${clientId}&redirect_uri=${redirectUrl}&state=${projectId}`;
      window.location.href = feishuUrl;
    }

    if ((window as any).h5sdk) {
      (window as any).h5sdk.ready(() => {
        tt.requestAuthCode({
          appId: clientId,
          success: async (info: { code: string }) => {
            if (info.code) {
              await feishuAutoLogin(info.code);
            }
          },
          fail: (error: any) => {
            console.error(error);
          }
        });
      });
    }

    return {
      xCode,
      feiShuAuthClick
    };
  }
});
</script>

<template>
    <div class="tzLogin">
        <svg @click="feiShuAuthClick" width="48" height="48" viewBox="0 0 48 48" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <rect width="48" height="48" fill="white" />
            <path
                d="M25.9958 24.7255L26.084 24.6373C26.1481 24.5812 26.2042 24.5171 26.2603 24.461L26.3805 24.3407L26.7492 23.9801L27.2543 23.4831L27.6871 23.0583L28.0878 22.6575L28.5127 22.2407L28.8974 21.8559L29.4345 21.3189C29.5387 21.2227 29.6429 21.1185 29.7471 21.0223C29.9394 20.846 30.1479 20.6696 30.3482 20.5013C30.5406 20.349 30.733 20.2047 30.9334 20.0604C31.214 19.86 31.4945 19.6757 31.791 19.4993C32.0876 19.323 32.3842 19.1707 32.6808 19.0264C32.9693 18.8901 33.2579 18.7619 33.5545 18.6497C33.7228 18.5856 33.8912 18.5214 34.0514 18.4653L34.3079 18.3852C33.5625 15.4434 32.1918 12.6941 30.2921 10.3215C29.9234 9.86464 29.3703 9.6001 28.7852 9.6001H13.2671C13.1067 9.6001 12.9785 9.72832 12.9785 9.88864C12.9785 9.98482 13.0186 10.065 13.0987 10.1211C18.397 14.0247 22.7816 19.0104 25.9637 24.7575L25.9958 24.7255Z"
                fill="#00CEB1" />
            <path
                d="M19.8406 38.3843C27.5836 38.3843 34.7175 34.1921 38.4768 27.427C38.605 27.1946 38.7253 26.9621 38.8455 26.7296C38.6611 27.0743 38.4607 27.411 38.2363 27.7396C38.1562 27.8518 38.076 27.9641 37.9959 28.0682C37.8916 28.2045 37.7794 28.3328 37.6752 28.461C37.5871 28.5652 37.4989 28.6614 37.4027 28.7576C37.2184 28.95 37.018 29.1343 36.8176 29.3106C36.7054 29.4068 36.5931 29.503 36.4729 29.5912C36.3366 29.6954 36.1924 29.7996 36.0561 29.8958C35.9679 29.9599 35.8717 30.016 35.7835 30.0722C35.6954 30.1283 35.5912 30.1923 35.487 30.2405C35.2866 30.3527 35.0782 30.4569 34.8698 30.5531C34.6854 30.6332 34.5011 30.7134 34.3167 30.7775C34.1163 30.8496 33.9079 30.9218 33.6995 30.9779C33.3869 31.0661 33.0663 31.1302 32.7376 31.1863C32.5052 31.2264 32.2728 31.2504 32.0323 31.2665C31.7838 31.2825 31.5353 31.2905 31.2788 31.2825C30.9982 31.2745 30.7177 31.2584 30.4372 31.2264C30.2287 31.2023 30.0204 31.1703 29.812 31.1382C29.6276 31.1061 29.4513 31.0661 29.2669 31.026C29.1707 31.0019 29.0745 30.9779 28.9783 30.9539C28.7138 30.8817 28.4413 30.8096 28.1768 30.7294L27.784 30.6092C27.5836 30.5531 27.3913 30.4889 27.1909 30.4328C27.0306 30.3848 26.8702 30.3287 26.7099 30.2805C26.5576 30.2324 26.4054 30.1844 26.253 30.1283L25.9404 30.024L25.5637 29.8878L25.2992 29.7916C25.1229 29.7275 24.9465 29.6633 24.7702 29.5992L24.4656 29.487L24.0568 29.3267C23.9125 29.2706 23.7682 29.2145 23.6239 29.1584L23.3434 29.0462L22.9987 28.9019L22.7342 28.7897L22.4617 28.6694L22.2212 28.5652L22.0048 28.469L21.7884 28.3728L21.5639 28.2686L21.2754 28.1324L20.9788 27.9881L20.6582 27.8358L20.3856 27.6995C15.6324 25.3189 11.3361 22.1127 7.69699 18.2251C7.58473 18.1049 7.40041 18.1049 7.28815 18.2091C7.23205 18.2652 7.20001 18.3373 7.20001 18.4175L7.20805 32.1161V33.2303C7.20805 33.8795 7.52863 34.4807 8.06569 34.8414C11.5525 37.1579 15.6484 38.3923 19.8406 38.3843Z"
                fill="#3370FF" />
            <path
                d="M37.8772 27.4253L37.8691 27.4414L37.8772 27.4253L37.9493 27.2891C37.9252 27.3372 37.9012 27.3773 37.8772 27.4253Z"
                fill="#133C92" />
            <path d="M38.2137 26.8012L38.2297 26.7611L38.2377 26.7451L38.2137 26.8012Z" fill="#133C92" />
            <path
                d="M43.3814 19.0825C40.6802 17.76 37.5781 17.4714 34.6845 18.289C34.5642 18.321 34.444 18.3611 34.3238 18.3932L34.0673 18.4733C33.899 18.5295 33.7307 18.5935 33.5703 18.6577C33.2738 18.7699 32.9852 18.8982 32.6966 19.0344C32.392 19.1787 32.0955 19.339 31.8069 19.5073C31.5183 19.6756 31.2297 19.86 30.9492 20.0685C30.7488 20.2127 30.5565 20.357 30.3641 20.5093C30.1557 20.6776 29.9553 20.8459 29.7629 21.0303C29.6587 21.1265 29.5545 21.2227 29.4503 21.3269L28.9133 21.8639L28.5285 22.2487L28.1117 22.6655L27.7109 23.0662L27.2781 23.4911L26.7731 23.9881L26.4044 24.3487L26.2842 24.469C26.228 24.5251 26.1639 24.5892 26.1078 24.6453L26.0196 24.7335L25.8834 24.8617L25.7231 25.006C24.3925 26.2324 22.9016 27.2824 21.3065 28.1321L21.5951 28.2684L21.8195 28.3726L22.0439 28.4688L22.2603 28.5649L22.5008 28.6692L22.7733 28.7894L23.0378 28.9016L23.3825 29.0459L23.6631 29.1581C23.8073 29.2142 23.9516 29.2703 24.0959 29.3264L24.5047 29.4867L24.8093 29.599C24.9857 29.6631 25.162 29.7272 25.3383 29.7913L25.6028 29.8875L25.9796 30.0157L26.2922 30.12C26.4444 30.1761 26.5968 30.2242 26.7491 30.2722C26.9094 30.3283 27.0697 30.3765 27.23 30.4246C27.4224 30.4887 27.6228 30.5448 27.8231 30.6009L28.2159 30.7212C28.4804 30.8013 28.745 30.8734 29.0175 30.9456C29.1137 30.9696 29.2098 30.9937 29.306 31.0177C29.4904 31.0578 29.6667 31.0978 29.8511 31.1299C30.0595 31.17 30.2679 31.1941 30.4763 31.2181C30.7568 31.2502 31.0374 31.2662 31.3179 31.2742C31.5744 31.2742 31.8229 31.2742 32.0714 31.2582C32.3119 31.2421 32.5443 31.2181 32.7768 31.178C33.0974 31.1299 33.418 31.0578 33.7226 30.9776C33.931 30.9215 34.1394 30.8574 34.3398 30.7773C34.5242 30.7131 34.7085 30.633 34.8929 30.5528C35.1013 30.4566 35.3097 30.3524 35.5101 30.2402C35.6063 30.1841 35.7105 30.128 35.8067 30.0719C35.9028 30.0157 35.991 29.9596 36.0792 29.8955C36.2235 29.7993 36.3597 29.6952 36.496 29.5909C36.6162 29.5027 36.7284 29.4066 36.8407 29.3104C37.041 29.134 37.2414 28.9497 37.4258 28.7573C37.522 28.6611 37.6102 28.5649 37.6983 28.4607C37.8105 28.3325 37.9148 28.2042 38.019 28.068C38.0991 27.9638 38.1793 27.8515 38.2595 27.7393C38.4839 27.4187 38.6843 27.0901 38.8686 26.7374L39.077 26.3206L40.9527 22.5773V22.5853C41.5218 21.2868 42.3554 20.0925 43.3814 19.0825Z"
                fill="#133C92" />
            <path d="M37.9012 27.4346L37.8932 27.4506L37.9012 27.4346L37.9733 27.2983L37.9012 27.4346Z" fill="#133C92" />
            <path d="M38.2295 26.809L38.2455 26.7689L38.2536 26.7529C38.2536 26.7769 38.2375 26.793 38.2295 26.809Z"
                fill="#133C92" />
        </svg>
    </div>
</template>

<style scoped>
.template-component {
    color: #2c3e50;
}
</style>
